<template>
  <div>
    <!-- 第1行 -->
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{userCount}}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-2">
            <div class="grid-cont-right">
              <div class="grid-num">{{carsCount}}</div>
              <div>购物车总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-3">
            <div class="grid-cont-right">
              <div class="grid-num">{{couponCount}}</div>
              <div>优惠码总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
          <div class="grid-content grid-con-4">
            <div class="grid-cont-right">
              <div class="grid-num">{{catCount}}</div>
              <div>宠物总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第2行 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <h3>用户性别比例</h3>
        <div id="gender" style="width: 600px;height:400px;margin-top:20px;">
          <!--<ve-pie></ve-pie>-->
        </div>
      </el-col>

      <el-col :span="12">
        <h3>用户购物车数量</h3>
        <div id="cars" style="width: 600px;height:400px;margin-top:20px;">

        </div>
      </el-col>
    </el-row>

    <!-- 第3行 -->

  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: "Gather",
    data() {
      return {
        userCount: 0,
        carsCount: 0,
        couponCount: 0,
        catCount: 0
      }
    },
    mounted() {
      this.getUser();
      this.getCars();
      this.getCoupon();
      this.getCat();

      // 创建dom实例
      let myChart = echarts.init(document.getElementById('gender'));
      let myChart2 = echarts.init(document.getElementById('cars'));

      // 指定图表的配置项和数据     option.series.data[0].value
      let option = { // 饼图
        title: {
          text: '',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 234,
                name: '男'
              },
              {
                value: 123,
                name: '女'
              }
            ],
            radius: ['40%', '70%']
          }
        ]
      };

      let option2 = { // 柱状图
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };

      // 使用指定的配置项和数据显示图表
      myChart.setOption(option);
      myChart2.setOption(option2);
    },
    methods: {
      getUser() {
        var that = this
        this.$axios.get('http://localhost:9000/gather/getUserCount').then(function (resp) {
          that.userCount = resp.data
        })
      },
      getCars() {
        var that = this
        this.$axios.get('http://localhost:9000/gather/getCarsCount').then(function (resp) {
          that.carsCount = resp.data
        })
      },
      getCoupon() {
        var that = this
        this.$axios.get('http://localhost:9000/gather/getCouponCount').then(function (resp) {
          that.couponCount = resp.data
        })
      },
      getCat() {
        var that = this
        this.$axios.get('http://localhost:9000/gather/getCatCount').then(function (resp) {
          that.catCount = resp.data
        })
      }
    }

  }
</script>

<style>

  .grid-content {
    display: flex;
    align-items: center;
    height: 100px;
  }

  .grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: blue;
  }

  .grid-num {
    font-size: 30px;
    font-weight: bold;
  }
</style>
